<!DOCTYPE HTML>
<html>
<head>
    <!-- twitter bootstrap CSS stylesheet - included to make things pretty, not needed or used by cornerstone -->
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">

    <h1>
        viewport/index.html
    </h1>

    This example demonstrates setting various viewport settings when the image is first enabled to
    focus on a tumor in the image.

    <br>
    <br>

    <div id="dicomImage" style="width:512px;height:512px;"
         oncontextmenu="return false"
         onmousedown="return false">
    </div>

</div>
</body>

<!-- include the cornerstone library -->
<script src="../../dist/cornerstone.js"></script>
<script>window.cornerstone || document.write('<script src="https://unpkg.com/cornerstone-core">\x3C/script>')</script>

<!-- include special code for these examples which provides images -->
<script src="../exampleImageIdLoader.js"></script>

<script>
    const viewportOptions = {
        scale: 6.0,
        translation: {
            x: -24,
            y: 10
        },
        voi: {
            windowWidth: 89,
            windowCenter: 150
        },
        invert: false,
        pixelReplication: false
    };
    const element = document.getElementById('dicomImage');
    cornerstone.enable(element);
    cornerstone.loadImage("example://1").then(function (image) {
        cornerstone.displayImage(element, image, viewportOptions);
    });
</script>
</html>
